<form
  dForm
  ngForm
  [layout]="formLayout"
  [formGroup]="formGroup"
  [dValidateRules]="formConfig.rule"
  #form="dValidateRules"
  (ngSubmit)="submitForm()"
>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.stepTitle' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="stepTitle" formControlName="stepTitle" [dValidateRules]="formConfig.stepTitleRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.source-druid.dataSource' | translate }}</d-form-label>
        <d-form-control>
          <d-select
            [options]="dataSourceList"
            name="dataSource"
            [isSearch]="true"
            [allowClear]="true"
            formControlName="dataSource"
            [filterKey]="'label'"
            [dValidateRules]="formConfig.dataSourceRules"
            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
          >
            <ng-template let-option="option"> {{ option['label'] }} </ng-template>
          </d-select>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.source-druid.datasourceName' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="datasourceName" formControlName="datasourceName" [dValidateRules]="formConfig.datasourceNameRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-druid.parallelism' | translate }}</d-form-label>
        <d-form-control>
          <d-form-control>
            <d-input-number
              [min]="1"
              formControlName="parallelism"
              class="input-number">
            </d-input-number>
          </d-form-control>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-druid.start_date' | translate }}</d-form-label>
        <d-form-control>
          <input
            dTextInput
            name="start_date"
            formControlName="start_date"
            [dValidateRules]="formConfig.startDateRules"
          />
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-druid.end_date' | translate }}</d-form-label>
        <d-form-control>
          <input
            dTextInput
            name="end_date"
            formControlName="end_date"
            [dValidateRules]="formConfig.endDateRules"
          />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-druid.columns' | translate }}</d-form-label>
        <d-form-control>
          <input 
            dTextInput 
            name="columns" 
            formControlName="columns" 
            placeholder="{{ 'datadev.step.sink-druid.columns.tooltip' | translate }}"
            />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
</form>
